<template>
  <div class="world-index">
    <div class="world-idx-router">
      <router-view/>
    </div>
    <div class="section">
      <cube-tab-bar
        v-model="tabBar.selectedLabelDefault"
        @click="clickHandler"
        @change="changeHandler">
        <cube-tab v-for="(item, index) in tabBar.tabs" :label="item.label" :key="item.label">
          <i slot="icon" :class="item.icon"></i>
          <!-- use en empty tag to replace default slot -->
          <span></span>
        </cube-tab>
      </cube-tab-bar>
    </div>
  </div>
</template>

<script>
export default {
  name: 'WorldIndex',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      toastTxt: 'cube toast content',
      tabBar: {
        selectedLabelDefault: 'store',
        tabs: [{
          label: 'bookshelf',
          icon: 'cubeic-home'
        }, {
          label: 'store',
          icon: 'cubeic-search'
        }, {
          label: 'vip',
          icon: 'cubeic-vip'
        }, {
          label: 'person',
          icon: 'cubeic-person'
        }]
      }
    }
  },
  methods: {
    showToast () {
      this.$createToast({
        txt: this.toastTxt
      }).show()
    },
    clickHandler (label) {
      // if you clicked home tab, then print 'Home'
      console.log(label)
      this.$router.push('/index/' + label)
    },
    changeHandler (label) {
      // if you clicked different tab, this methods can be emitted
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .world-index {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }
  .world-idx-router {
    position: fixed;
    background-color: white;
    width: 94%;
    left: 3%;
    top: 5px;
    bottom: 45px;
    overflow: auto;
  }
  .section {
    background-color: black;
    position: fixed;
    width: 94%;
    bottom: 5px;
    left: 3%;
    border-radius: 15px;
  }
  .cubeic-vip,
  .cubeic-home,
  .cubeic-search,
  .cubeic-person {
    font-size: 25px;
  }
</style>

